<template>
  <div class="app-container">
    <el-dialog
      v-model="dialogVisible"
      @open="onOpen"
      @close="onClose"
      title="编辑资料"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        size="default"
        label-width="100px"
        @submit.prevent
      >
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="文件上传" prop="url">
              <el-upload
                ref="fileListUpload"
                v-model:file-list="fileList"
                :action="fileListAction"
                multiple
                :before-upload="fileListBeforeUpload"
                :headers="headers"
                :on-success="handleUploadSuccess"
                :limit="1"
                :on-remove="handleRemove"
              >
                <el-button size="small" type="primary" :disabled="hideUpload"
                  >+点击上传</el-button
                >
              </el-upload>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="文件标签" prop="labelList">
              <el-tag
                v-for="tag in formData.labelList"
                :key="tag"
                closable
                :disable-transitions="false"
                @close="handleLabelClose(tag)"
                style="margin-right:10px"
              >
                {{ tag }}
              </el-tag>
              <el-input
                v-if="inputLabelVisible"
                ref="InputLabelRef"
                v-model="inputLabelValue"
                style="width: 150px"
                size="small"
                @keyup.enter="handleLabelInputConfirm"
                @blur="handleLabelInputConfirm"
              />

              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showLabelInput"
              >
                + 新增标签
              </el-button>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { getToken } from "@/utils/auth";
const headers = ref({
  Authorization: "Bearer " + getToken(),
});
const { proxy } = getCurrentInstance();
const formRef = ref();
const proTypeOptions = ref([]);
const data = reactive({
  formData: {
    name: "",
    labelList: [],
    url: "",
  },
  rules: {
    url: [
      {
        required: true,
        message: "文件不能为空",
        trigger: "change",
      },
    ],
  },
});
const { formData, rules } = toRefs(data);
// 上传请求路径
const fileListAction = ref(import.meta.env.VITE_APP_BASEURL + "/common/upload");
// 上传文件列表
const fileList = ref([]);
const hideUpload = ref(false);
const limitCount = ref(1);
/**
 * @name: 上传之前的文件判断
 * @description: 上传之前的文件判断，判断文件大小文件类型等
 * @param {*} file
 * @return {*}
 */
function imgUrlBeforeUpload(file) {
  let isRightSize = file.size / 1024 / 1024 < 2000;
  if (!isRightSize) {
    proxy.$modal.msgError("文件大小超过 2G");
  }
  return isRightSize;
}
// 弹窗设置
const dialogVisible = defineModel();
// 弹窗确认回调
const emit = defineEmits(["confirm"]);
/**
 * @name: 弹窗打开后执行
 * @description: 弹窗打开后执行方法
 * @return {*}
 */
function onOpen() {
}
/**
 * @name: 弹窗关闭时执行
 * @description: 弹窗关闭方法，重置表单
 * @return {*}
 */
function onClose() {
  formRef.value.resetFields();
  formData.value = {
    name: "",
    labelList: [],
    url: "",
  };
  fileList.value = [];
  hideUpload.value = false;
}
/**
 * @name: 弹窗取消
 * @description: 弹窗取消方法
 * @return {*}
 */
function close() {
  dialogVisible.value = false;
}
function handleUploadSuccess(res) {
  if (res.code == 200) {
    formData.value.url = res.url;
    formData.value.name = res.name;
    hideUpload.value = fileList.value.length >= limitCount.value;
  } else {
    proxy.$modal.msgError(res.msg);
    fileList.value = [];
  }
}
//缩略图删除
const handleRemove = (res) => {
  formData.value.url = "";
  formData.value.name = "";
  hideUpload.value = fileList.value.length >= limitCount.value;
};
/**
 * @name: 上传之前的文件判断
 * @description: 上传之前的文件判断，判断文件大小文件类型等
 * @param {*} file
 * @return {*}
 */
function fileListBeforeUpload(file) {
  let isRightSize = file.size / 1024 / 1024 < 2000;
  if (!isRightSize) {
    proxy.$modal.msgError("文件大小超过 2G");
  }
  return isRightSize;
}
/**
 * @name: 弹窗表单提交
 * @description: 弹窗表单提交方法
 * @return {*}
 */
function handelConfirm() {
  formRef.value.validate((valid) => {
    if (!valid) return;
    // TODO 提交表单
    let params = {
      fileLabels: [],
      url: formData.value.url,
      name: formData.value.name,
    };
    params.fileLabels = formData.value.labelList.map((item) => {
      let i = {
        dictValue: item,
        dictCode: "",
      };
      return i;
    });
    // 回调父级组件
    emit("confirm", params);
    close();
  });
}

//标签处理
const inputLabelValue = ref("");
const inputLabelVisible = ref(false);
const InputLabelRef = ref(null);
function handleLabelClose(tag) {
  formData.value.labelList.splice(formData.value.labelList.indexOf(tag), 1);
}
function showLabelInput() {
  inputLabelVisible.value = true;
  nextTick(() => {
    InputLabelRef.value.focus();
  });
}

function handleLabelInputConfirm() {
  if (inputLabelValue.value) {
    formData.value.labelList.push(inputLabelValue.value);
  }
  inputLabelVisible.value = false;
  inputLabelValue.value = "";
}
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>